<template>
	<div class="integral">
		<div class="top">
			<div class="socialTitle clearfix">
				<div class="titleName fl">
					<span>用户积分明细</span>
					<span style="color: #00C000;">（{{ integral }}）</span>
				</div>
			</div>
		</div>
		<div class="header-msg">
			<el-row class="header-msg-list">
				<el-col :span="4" v-for="(item, index) in headerList" :key="index">
					<span>{{ item.title }}: <span style="color: blue;">{{ item.value }}</span></span>
				</el-col>
			</el-row>
		</div>
		<div class="search">
			<div class="search-date">
				<span>获取时间段</span>
				<el-date-picker v-model="startDate" type="date" placeholder="请选择" value-format="yyyy-MM-dd"
					style="width:140px"></el-date-picker>
				<span class="separator">~</span>
				<el-date-picker v-model="endDate" type="date" placeholder="请选择" value-format="yyyy-MM-dd"
					style="width:140px"></el-date-picker>
			</div>
			<div class="item-botton" @click="searchInfo">查询</div>
		</div>
		<ul class="checkTab">
			<template v-for="(item, index) in tabs">
				<li :key="index" v-html="`${item.label}`" :class="{ 'active': current === item.value }"
					@click="clickTab(item.value)"></li>
			</template>
		</ul>
		<div>
			<el-table :data="tableData.data" border style="width: 100%">
				<template v-for="(item, index) in tableData.list">
					<el-table-column :prop="item.prop" :key="index + current + 20" align="center" :label="item.title"
						v-if="item.isClick">
						<template scope="scope">
							<el-button @click="handleClick(item.prop, scope.row)" type="text" size="small">
								{{ scope.row[item.prop] }}</el-button>
						</template>
					</el-table-column>
					<el-table-column :prop="item.prop" :label="item.title" v-else align="center" :key="index + current + 20">
					</el-table-column>
				</template>

			</el-table>
		</div>
		<div style="padding: 20px 0; text-align: right;">
			<el-pagination @size-change="handleSizeChange" @current-change="PageCurrentChange" :current-page="pageNum"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total"></el-pagination>
		</div>
		<el-dialog :visible.sync="resume.dialogVisible" width="1040px">
			<resume-detail v-if="resume.dialogVisible" :userid="resume.userid" :nickName="resume.nickName"
				:isShowTelphone="true"></resume-detail>
		</el-dialog>
	</div>
</template>
<script>
export default {
	components: {
		resumeDetail: () => import("../../../component/resumeDetail/index.vue")
	},
	data() {
		return {
			integral: 0, //积分
			current: 1, //当前在哪个分页
			tabs: [{
				label: "自得累计积分",
				value: 1
			},
			// {label: "入职奖励",value: 2},
			// {label: "招聘奖励",value: 3},
			{
				label: "累计邀请积分",
				value: 4
			},
			// {label: "平台处罚",value: 5},
			{
				label: "累计提现积分",
				value: 6
			},
				// {label: "使用明细",value: 7},

			],
			curUserId: '', //当前明细人userId
			startDate: '', //开始时间
			endDate: '', //结束时间
			headerList: [{
				title: '会员名称',
				value: ''
			},
			{
				title: '会员ID',
				value: ''
			},
			{
				title: '真实姓名',
				value: ''
			},
			{
				title: '手机号码',
				value: ''
			},
			{
				title: '总剩余积分',
				value: ''
			},
			// {title: '总提现积分',value: ''},
			{
				title: '自得累计积分',
				value: ''
			},
			{
				title: '邀请累计积分',
				value: ''
			},
			{
				title: '累计提现积分',
				value: ''
			},
				// {title: '总处罚积分',value: ''}
			],
			tableData: {
				list: [
					/* {title:'积分类型',prop:'gettype',isClick:false},
					{title:'获取时间',prop:'insertdate',isClick:false},
					{title:'积分类型',prop:'interalnum',isClick:false}, */
					/* {title:'入职员工',prop:'nickname',isClick:false},
					{title:'入职岗位',prop:'positionname',isClick:false},
					{title:'入职企业',prop:'companyname',isClick:false},
					{title:'保障期截至时间',prop:'safeguard',isClick:false},
					{title:'企业支付时间',prop:'paydate',isClick:false},
					{title:'发放积分',prop:'interalnum',isClick:false}, */
				],
				data: [
					/* {
						gettype: '入职奖励',									//积分类型
						insertdate: '2020-01-22',							//获取时间
						interalnum: 22,										//积分金额
					} */
					/* {
						nickname: '张三',									//入职员工
						positionname: '技工',								//入职岗位
						companyname: '保险公司',								//入职企业
						safeguard: '2020-12-15',							//保障期截至时间
						paydate: '2020-5-12',								//企业支付时间
						interalnum: 99,										//发放积分
					} */
				]
			},
			resume: {
				dialogVisible: false, //显示详情模板
				userid: '', //
				nickName: '', //
			},

			//分页功能
			pageNum: 0, //当前页码
			pageSize: 10, //每页显示多少条数据
			total: 0, //总共有多少条数据
		}
	},
	created() {
		this.curUserId = this.$route.params.id;
		this.clickTab(this.current);
	},
	methods: {
		// 顶部tab切换
		clickTab(index) {
			this.current = index;
			this.tableData.list.splice(0);
			this.tableData.data.splice(0);
			if (index == 1) {
				this.tableData.list = [{
					title: '具体内容',
					prop: 'companyname',
					isClick: false
				},
				{
					title: '积分类型',
					prop: 'gettype',
					isClick: false
				},
				{
					title: '获取时间',
					prop: 'insertdate',
					isClick: false
				},
				{
					title: '积分',
					prop: 'interalnum',
					isClick: false
				},
				]
			} else if (index == 2) {
				this.tableData.list = [{
					title: '入职岗位',
					prop: 'positionname',
					isClick: false
				},
				{
					title: '入职企业',
					prop: 'companyname',
					isClick: false
				},
				{
					title: '保障期截至时间',
					prop: 'safeguard',
					isClick: false
				},
				{
					title: '企业支付时间',
					prop: 'paydate',
					isClick: false
				},
				{
					title: '发放积分',
					prop: 'interalnum',
					isClick: false
				}
				]
			} else if (index == 3) {
				this.tableData.list = [{
					title: '入职员工',
					prop: 'nickname',
					isClick: false
				},
				{
					title: '入职岗位',
					prop: 'positionname',
					isClick: false
				},
				{
					title: '入职企业',
					prop: 'companyname',
					isClick: false
				},
				{
					title: '保障期截至时间',
					prop: 'safeguard',
					isClick: false
				},
				{
					title: '企业支付时间',
					prop: 'paydate',
					isClick: false
				},
				{
					title: '发放积分',
					prop: 'interalnum',
					isClick: false
				}
				]
			} else if (index == 4) {
				this.tableData.list = [{
					title: '注册时间',
					prop: 'registertime',
					isClick: false
				},
				{
					title: '会员ID',
					prop: 'tdaccount',
					isClick: false
				},
				{
					title: '手机号码',
					prop: 'telnum',
					isClick: false
				},
				{
					title: '新注册会员名称',
					prop: 'u1nickname',
					isClick: true
				},
				{
					title: '层级关系',
					prop: 'hierarchy',
					isClick: false
				},
				{
					title: '发放积分',
					prop: 'interalnum',
					isClick: false
				}
				]
			} else if (index == 5) {
				this.tableData.list = [{
					title: '会员名称',
					prop: 'nickname',
					isClick: true
				},
				{
					title: '应聘公司',
					prop: 'companyname',
					isClick: false
				},
				{
					title: '应聘岗位',
					prop: 'positionname',
					isClick: false
				},
				{
					title: '所在地区',
					prop: 'region',
					isClick: false
				},
				{
					title: '处罚类型',
					prop: 'punishtype',
					isClick: false
				},
				{
					title: '处罚积分',
					prop: 'interalnum',
					isClick: false
				},
				{
					title: '处罚时间',
					prop: 'auditdate',
					isClick: false
				}
				]
			} else if (index == 6) {
				this.tableData.list = [{
					title: '会员名称',
					prop: 'nickname',
					isClick: true
				},
				{
					title: '证件号码',
					prop: 'cardnum',
					isClick: false
				},
				{
					title: '提现银行',
					prop: 'banktype',
					isClick: false
				},
				{
					title: '提现银行账户',
					prop: 'usenum',
					isClick: false
				},
				{
					title: '手机号码',
					prop: 'telnum',
					isClick: false
				},
				{
					title: '提现金额(元)',
					prop: 'outintegral',
					isClick: false
				},
				{
					title: '个人所得税(元)',
					prop: 'personaltax',
					isClick: false
				},
				{
					title: '手续费(元)',
					prop: 'fee',
					isClick: false
				},
				{
					title: '实际到账金额(元)',
					prop: 'arriveintegral',
					isClick: false
				},
				{
					title: '申请时间',
					prop: 'inserdate',
					isClick: false
				},
				{
					title: '审批人',
					prop: 'auditorid',
					isClick: false
				},
				{
					title: '审批时间',
					prop: 'auditdate',
					isClick: false
				}
				]
			} else if (index == 7) {
				this.tableData.list = [{
					title: '支付类别',
					prop: 'gettype',
					isClick: false
				},
				{
					title: '支付金额',
					prop: 'interalnum',
					isClick: false
				},
				{
					title: '支付时间',
					prop: 'insertdate',
					isClick: false
				}
				]
			}
			this.getDataList(index);
		},
		// 获取列表数据
		getDataList(index, form) {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				userid: this.curUserId
			};
			if (form) {
				Object.assign(params, form);
			}


			if (index == 1) {
				params.type = 5;
			} else if (index == 2) {
				params.type = 2;
			} else if (index == 3) {
				params.type = 3;
			} else if (index == 4) {
				params.type = 4;
			} else if (index == 5) {
				params.type = 7;
			} else if (index == 6) {
				params.type = 8;
			} else if (index == 7) {
				console.log(777777);
				let param = {
					pagenum: 1,
					userid: this.curUserId
				}
				this.$ceshiGetAxios('v1/userInfo/PaymentDetails', param).then(res => {
					console.log(res, '2');
					this.tableData.data = res.data.list
					this.total = Number(res.data.sumtotal);
				})
				params.type = 9;
			}


			this.$ceshiAxios.post('/v1/common/newIntegralList', params).then(res => {
				console.log(res);
				if (res.data.code === 1) {
					let result = res.data.data;
					this.total = Number(result.totalnum);
					this.$set(this.headerList[0], 'value', result.integralVo.nickname);
					this.$set(this.headerList[1], 'value', result.integralVo.tdaccount);
					if (result.integralVo.username) {
						this.$set(this.headerList[2], 'value', result.integralVo.username);
					} else {
						this.$set(this.headerList[2], 'value', '暂未填写');
					}
					this.$set(this.headerList[3], 'value', result.integralVo.telnum);
					this.$set(this.headerList[4], 'value', result.integralVo.totalintegral);
					this.$set(this.headerList[5], 'value', result.integralVo.entryIntegral);
					this.$set(this.headerList[6], 'value', result.integralVo.inviteIntegral);
					this.$set(this.headerList[7], 'value', result.integralVo.activityIntegral);
					// this.$set(this.headerList[8],'value',result.integralVo.activityIntegral);
					this.integral = result.integralVo.activityIntegral;
					//累计处罚
					// this.$set(this.headerList[9],'value',result.integralVo.punishIntegral);


					if (index == 5) {
						this.tableData.data = result.platformSummaryPlatformPunishLists;
					} else if (index == 6) {
						this.tableData.data = result.memberIntegralOutVos;
					} else if (index == 1 || index == 4 || index == 2 || index == 3) {
						this.tableData.data = result.integralVos;
					} else {

					}
				} else {
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})



		},
		// 点击获取会员详情
		handleClick(prop, data) {
			console.log(prop);
			console.log(data);
			this.resume.dialogVisible = true;
			if (prop == 'nickName') {
				this.resume.nickName = data.nickName;
				this.resume.userid = data.userid;
			} else {
				this.resume.nickName = data.u1nickname;
				this.resume.userid = data.u1userid;
			}
		},
		// 根据时间搜索列表数据
		searchInfo() {
			let form = {};
			if (this.startDate && this.endDate && Date.parse(this.startDate) > Date.parse(this.endDate)) {
				this.$message({
					message: "结束时间不能早于开始时间",
					type: "warning"
				});
				return false;
			}
			if (this.startDate) {
				form.startDate = this.startDate;
			}
			if (this.endDate) {
				form.endDate = this.endDate;
			}
			this.getDataList(this.current, form);
		},

		handleSizeChange(val) {
			console.log(val);
			this.pageSize = val;
			this.searchInfo();
		},
		PageCurrentChange(val) {
			console.log(val);
			this.pageNum = val;
			this.searchInfo();
		}
	}
}
</script>
<style scoped="scoped">
.integral {
	padding: 10px 15px;
	background-color: #fff;
	margin: 20px;
}

.integral .top {}

.integral .header-msg,
.integral .search {
	margin: 20px;
}

.header-msg .header-msg-list {
	line-height: 30px;
}

.integral .checkTab {
	width: 100%;
}

.search {
	overflow: hidden;
	margin-bottom: 15px;
}

.search-date,
.item-botton {
	display: inline-block;
}

.item-botton {
	width: 100px;
	height: 40px;
	line-height: 40px;
	margin: 5px 20px 5px 0px;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	background-color: #0064e4;
	text-align: center;
	float: right;
}
</style>
